<template>
  <el-select
    ref="select"
    v-model="selecteds"
    style="position: relative; width: 100%;"
    :multiple="multiple"
    filterable
    clearable
    placeholder=""
    :filter-method="dataFilter"
    @focus="init"
    @blur="clearFilter"
  >
    <el-option
      v-for="item in datas"
      :key="item[value]"
      :label="item[label]"
      :value="item[value]"
    >
      <slot v-bind:item="item"></slot>
    </el-option>
    <div
      v-if="total"
      class="text-center"
      style="position: sticky;background: #fff;bottom:0;z-index:1"
    >
      <div class="text-normal display-flex" style="justify-content: center;">
        <el-pagination
          layout="total, prev, pager, next, jumper"
          background
          :current-page.sync="page"
          :page-size.sync="limit"
          :page-sizes="[10, 20, 30, 50]"
          :total="total"
          @size-change="trigger"
          @current-change="trigger"
        />
      </div>
    </div>
  </el-select>
</template>
<script>

export default {
  name: 'SelectPage',
  props: {
    multiple: {
      type: Boolean,
      default: true
    },
    label: {
      type: String,
      default: 'id'
    },
    value: {
      type: String,
      default: 'id'
    },
    // 查询函数，需要返回 rows total
    queryFunc: {
      default: null
    },
    // 初始化函数，用于查询回显的值
    initFunc: {
      default: null
    },
    selectIds: null,
    initSelectIds: null,
    conditions: {
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      datas: [],
      selecteds: null,
      search: null,
      total: 0,
      page: 1,
      limit: 10
    }
  },
  watch: {
    selectIds: {
      handler(val) {
        this.$set(this, 'selecteds', val)
      },
      immediate: true
    },
    conditions: {
      handler(val) {
        this.init()
      },
      immediate: true,
      deep: true
    },
    initSelectIds: {
      handler(val) {
        this.init()
      },
      immediate: true
    },
    selecteds: {
      handler(val) {
        this.$emit('update:selectIds', val)
        this.$emit('change', val)
      },
      deep: true
    }
  },
  async mounted() {
    // await this.init()
    // this.trigger()
  },
  methods: {
    clearFilter() {
      if (!this.datas || !this.datas.lenght) {
        this.search = ''
        this.init()
      }
    },
    dataFilter(e) {
      this.search = e
      this.trigger()
    },
    async init() {
      console.log('init')
      if (!this.initFunc) {
        this.trigger()
        return
      }
      const { rows = [], total = 0 } = await this.initFunc(this.initSelectIds)
      // console.log(rows, total)
      this.datas = rows
      this.total = total
      this.$nextTick(() => {
        this.trigger()
      })
    },
    async trigger() {
      const { rows = [], total = 0 } = await this.queryFunc({ page: this.page, limit: this.limit, search: this.search, conditions: this.conditions })
      // console.log(rows, total)
      this.datas = rows
      this.total = total
    }
  }
}
</script>
<style scoped>
.text-center {
  text-align: center;
}
</style>

